<template>
  <div class="map">
    <div class="map-header">
      <div class="map-left" @click="rooms()">
        <van-icon name="arrow-left" color="#a8a6a6" />
      </div>
      <span>地图找房</span>
      <span></span>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
export default {
  mounted() {
    let { BMap } = window;
    // var map = new BMap.Map("container");
    // map.centerAndZoom(this.arealist.label, 12);

    console.log(this.arealist.label);
    var map = new BMapGL.Map("container");
    // 创建点坐标
    map.centerAndZoom(this.arealist.label + "市", 15);
    map.enableScrollWheelZoom(true);
      let cityid = localStorage.getItem("cityid");
     axios.get(
        `http://47.102.145.189:8009/area/map?id=${cityid}`
      ).then(res=>{
        this.getCitylist(map,res.data.body,10);
      })
    
  },
  methods: {
    rooms() {
      this.$router.push("/home/room");
    },
    async getCitylist(map,data,num) {
    
     
      data.forEach(v => {
        var point = new BMapGL.Point(v.coord.longitude, v.coord.latitude);
        var content = v.label;
        var label = new BMapGL.Label(content, {
          // 创建文本标注
          position: point, // 设置标注的地理位置
          offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
        });
        map.centerAndZoom(point, num)
        label.setStyle({
          // 设置label的样式
          width: "60px",
          height: "60px",
          background: " rgba(12,181,106,.9)",
          borderRadius: "50%",
          textAlign: "center",
          lineHeight: "60px",
          color: "#fff",
          border:'none'
        });
        map.addOverlay(label);
         label.addEventListener("click", async e => {
          let result =  await axios.get(
        `http://47.102.145.189:8009/area/map?id=${v.value}`
      );
          
          if (result.data.body.length) {
            let point = new BMapGL.Point(
              result.data.body[0].coord.longitude,
              result.data.body[0].coord.latitude
            );
            map.clearOverlays();
            this.getCitylist(result.data.body, map, (num += 2));
            map.centerAndZoom(point, num); // 初始化地图,设置中心点坐标和地图级别
          } else {
            // let res = await this.$http.getHouses(item.value);
            // this.list = res.data.body.list;
            // this.show = true;
          }
        });
      });
    }
  },
  computed: {
    ...mapState(["arealist"])
  }
};
</script>

<style>
.map {
  width: 100%;
  height: 100%;
}
.map-header {
  width: 100%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f3f3f3;
}
.map-left i {
  display: flex;
  font-size: 25px;
  padding: 0 5px;
}
.map-header span {
  padding-right: 10px;
  font-size: 18px;
}
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
  overflow: scroll;
}

.map-main {
  height: 92%;
  overflow: scroll;
}
</style>